<template>
  <div class="list">
    <PageHeader title="商品管理" hidden-breadcrumb>
      <template #action>
        <Button type="primary" @click="$router.push('./goodsadd')">添加</Button>
      </template>
    </PageHeader>
    <Table class="table" border ref="selection" :columns="columns" :data="data">
      <template #thumb="{ row }">
        <Image
          :src="row.goods_thumb"
          width="240px"
          :alt="row.name"
          fit="fill"
          preview
          :preview-list="[row.goods_thumb]"
        />
      </template>
      <template #options="{ row, index }">
        <div class="options">
          <Button type="primary" @click="update(row, index)">编辑</Button>
          <Button type="error" @click="remove(row._id, index)">删除</Button>
        </div>
      </template>
    </Table>
  </div>
</template>

<script>
import { list } from "@/api/goods.js";
import moment from "moment";
export default {
  name: "GoodsList",
  data() {
    return {
      data: [],
      columns: [
        {
          title: "商品编号",
          key: "goods_sn",
          width: 110,
          align: "center",
        },
        {
          title: "商品名",
          key: "name",
          width: 200,
        },
        {
          title: "主图",
          key: "goods_thumb",
          slot: "thumb",
          align: "center",
        },
        {
          title: "商品描述",
          key: "goods_desc",
        },
        {
          title: "价格",
          key: "price",
          width: 100,
          align: "center",
          render: (h, params) => {
            return h("strong", this.formartNumber(params.row.price));
          },
        },
        {
          title: "添加时间",
          key: "add_date",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("strong", this.formartTime(params.row.add_date));
          },
        },
        {
          title: "卖家备注",
          key: "seller_note",
          width: 100,
          align: "center",
        },
      ],
    };
  },
  created() {
    this.columns.push({
      title: "操作",
      slot: "options",
      width: "200px",
      align: "center",
    });
    list().then((res) => {
      this.data = res.data.data;
    });
  },
  computed: {
    formartTime() {
      return function (val) {
        let date = new Date(val);
        return moment(date).format("YYYY-MM-DD H:mm:s");
      };
    },
    formartNumber() {
      return function (val) {
        return (val / 100).toFixed(2);
      };
    },
  },
};
</script>

<style scoped>
.list {
  width: 100%;
  margin: 0 10px;
  padding: 10px;
  background: #fff;
  margin-top: 50px;
}
</style>